<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>123</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<body>
<!--header区-->
<header>
    <div class="w">
        <div class="header_logo fl"><img src="images/oshine-logo-black.png"></div>
        <ul class="nav fl clearfix">
            <li class="fl"><a href="#">HOME</a></li>
            <li class="fl"><a href="#">PAGES</a></li>
            <li class="fl"><a href="#">PORTFOLIO</a></li>
            <li class="fl"><a href="#">SINGLE PORTFOLIO</a></li>
            <li class="fl"><a href="#">HEADERS</a></li>
            <li class="fl"><a href="#">JOURNAL</a></li>
            <li class="fl"><a href="#">SHOP</a></li>
            <li class="fl"><a href="#">SHORTCODES</a></li>
        </ul>
        <div class="header_r fr">
            <ul class="nav_2 fl clearfix">
                <li class="fl"><a href="#"><i class="fa fa-search"></i></a></li>
                <li class="fl"><a href="#"><i class="fa fa-navicon"></i></a></li>
                <li class="fl"><a href="#"><i class="fa fa-shopping-bag"></i></a></li>
            </ul>
        </div>
    </div>
</header>
<!--这是banner区-->
<banner>
    <div class="banner"><img src="images/oshin-slide-1.jpg"></div>
    <div class="banner_box_txt_t"><h2>M A K I N G  T H E  W E B</h2></div>
    <div class="banner_box_txt_m"><h1>STYLISH</h1></div>
    <div class="banner_box_txt_b"><h3>The Best or Nothing</h3></div>
</banner>
<main>
    <h4>WE ARE OSHINE</h4>
    <h5>A beautiful responsive multi-purpose wordpress theme</h5>
    <div class="box_line w">
        <div class="fl">
            <div class="a_line fl"></div>
            <div class="a_box fl"></div>
            <div class="a_line fl"></div>
        </div>
    </div>
        <p1>Oshine comes with 12 unique and stunning demos. We have crafted each and every demo with extensive care and precision and the theme is power packed yet easy to use.</p1>
    <div class="main_2"></div>
    <div class="w main_3 clearfix">
        <div class="fl"><i class="	fa fa-gitlab"></i><h6>12 DEMOS</h6></div>
        <div class="fl"><i class="	fa fa-paint-brush"></i><h6>POWERFUL OPTIONS</h6></div>


        <!--<div class="fl"><i class="fa fa-snowflake-o"></i><h6>PAGE BUILDER</h6></div>-->
        <div class="fl"><i class=" fa fa-joomla"></i><h6>PAGE BUILDER</h6></div>
        <div class="fl"><i class="fa fa-viadeo"></i><h6>UNLIMITED PORTFOLIO</h6></div>
    </div>
    <div class="w main_4 clearfix">
        <div class="main_4_l fl clearfix">
            <div class="fl">
                <i class="fa fa-joomla"></i>
                <h7>MODERN DESIGN</h7>
                <p2>Proin facilisis varius nunc. Curabitur eros risus, ultrices et dui ut, luctus accumsan nibh. Fusce convallis sapien placerat tellus suscipit vehicula.</p2>
            </div>
            <div class="fl">
                <i class="fa fa-wrench"></i>
                <h7>SUPER  CUSTOMIZABLE</h7>
                <p2>Proin facilisis varius nunc. Curabitur eros risus, ultrices et dui ut, luctus accumsan nibh. Fusce convallis sapien placerat tellus suscipit vehicula.</p2>
            </div>
            <div class="fl">
                <i class="fa fa-lightbulb-o"></i>
                <h7>UNIQUE LAYOUT</h7>
                <p2>Proin facilisis varius nunc. Curabitur eros risus, ultrices et dui ut, luctus accumsan nibh. Fusce convallis sapien placerat tellus suscipit vehicula.</p2>
            </div>
        </div>
        <div class="main_4_m fl"></div>
        <div class="main_4_r fr clearfix">
            <div class="fl">
                <i class="fa fa-spinner"></i>
                <h7>AJAX TRANSITIONS</h7>
                <p2>Proin facilisis varius nunc. Curabitur eros risus, ultrices et dui ut, luctus accumsan nibh. Fusce convallis sapien placerat tellus suscipit vehicula.</p2>
            </div>
            <div class="fl">
                <i class="fa fa-shopping-bag"></i>
                <h7>WOO COMMERCE</h7>
                <p2>Proin facilisis varius nunc. Curabitur eros risus, ultrices et dui ut, luctus accumsan nibh. Fusce convallis sapien placerat tellus suscipit vehicula.</p2>
            </div>
            <div class="fl">
                <i class="fa fa-shopping-basket"></i>
                <h7>40+ MODULES</h7>
                <p2>Proin facilisis varius nunc. Curabitur eros risus, ultrices et dui ut, luctus accumsan nibh. Fusce convallis sapien placerat tellus suscipit vehicula.</p2>
            </div>
        </div>
    </div>
    <div class="main_5"></div>
    <div class="main_6">
        <h4>OUR WORK</h4>
        <h5>A beautiful responsive multi-purpose wordpress theme</h5>
        <div class="box_line w">
            <div class="fl">
                <div class="a_line fl"></div>
                <div class="a_box fl"></div>
                <div class="a_line fl"></div>
            </div>
        </div>
        <div class="main_6_box fr">
            <i class="fa fa-angle-up"></i>
        </div>
    </div>
    <div class="main_7 w">
        <ul class="main_7_nav clearfix">
            <li class="fl"><a href="#">All</a></li>
            <li class="fl"><a href="#">Brochures</a></li>
            <li class="fl"><a href="#">Mobile</a></li>
            <li class="fl"><a href="#">Slider</a></li>
            <li class="fl"><a href="#">Videos</a></li>
            <li class="fl"><a href="#">Web</a></li>
        </ul>
        <div class="main_7_pic w clearfix">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div class="main_7_button">
            <h8>VIEW ALL WORK</h8>
        </div>
    </div>
    <div class="main_8">
        <div class="w"><i class="fa fa-twitter"></i></div>
        <p3>RT @<i>InteractiveAU</i>: Growth hacking is marketing that doesnt scale says:</p3>
        <li><a href="#">https://t.co/BrrwDbR2Pn</a></li>
        <span>@envato</span>
    </div>
    <div class="main_9">
        <h4>OUR CLIENTS</h4>
        <h5>A beautiful responsive multi-purpose wordpress theme</h5>
        <div class="box_line w">
            <div class="fl">
                <div class="a_line fl"></div>
                <div class="a_box fl"></div>
                <div class="a_line fl"></div>
            </div>
        </div>
    </div>
    <div class="main_10">
        <div class="w">
            <div class="main_10_pic clearfix fl">
                <div class="fl"></div>
                <div class="fl"></div>
            </div>
        </div>
    </div>
    <div class="main_11">
        <div class="main_11_bg">
            <div class="w">
                <h8>GET IN TOUCH</h8>
                <p3>Have an idea or a project, lets collaborate and build some awesome stuff</p3>
                <div class="main_11_button"><i>BUY NOW</i></div>
            </div>
        </div>
    </div>
</main>
<footer>
    <div class="footer_main w">
        <div class="footer_main_s clearfix fl">
            <div class="footer_main_1 fl">
                <div class="footer_main_1_logo"></div>
                <p5>Ea mei nostrum imperdiet deterruisset, mei ludus efficiendi ei. Sea summo mazim ex, ea errem eleifend definitionem vim. Detracto erroribus et mea.</p5>
                <div class="footer_main_1_lable_four">
                    <div class="fl"><i class="fa fa-facebook"></i></div>
                    <div class="fl"><i class="fa fa-qq"></i></div>
                    <div class="fl"><i class="fa fa-pinterest-p"></i></div>
                    <div class="fl"><i class="fa fa-dribbble"></i></div>
                </div>
            </div>
            <div class="footer_main_2 fl">
                <h9>Recent Posts</h9>
                <div class="footer_main_2_t">
                    <div class="aPic_1"></div>
                    <P5>Oshine – a Creative Multipurpose WordPress theme</P5>
                    <p6>October 10, 2014</p6>
                </div>
                <div class="footer_main_2_b">
                    <div class="aPic_2"></div>
                    <P5>If You Are Good At Something, Don’t Do It For Free</P5>
                    <p6>October 10, 2014</p6>
                </div>
            </div>
            <div class="footer_main_3 fl">
                <h9>Links</h9>
                <ul class="footer_nav">
                    <li><i class="fa fa-angle-right"></i><a href="#">Home</a></li>
                    <li><i class="fa fa-angle-right"></i><a href="#">About Us</a></li>
                    <li><i class="fa fa-angle-right"></i><a href="#">Team</a></li>
                    <li><i class="fa fa-angle-right"></i><a href="#">Blog</a></li>
                    <li><i class="fa fa-angle-right"></i><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="footer_main_4 fl">
                <h9>From Instagram</h9>
                <div class="footer_main_4_pic">
                    <div class="footer_main_4_pic_fudong clearfix">
                        <div class="fl"></div>
                        <div class="fl"></div>
                        <div class="fl"></div>
                        <div class="fl"></div>
                        <div class="fl"></div>
                        <div class="fl"></div>
                        <div class="fl"></div>
                        <div class="fl"></div>
                        <div class="fl"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer_bottom">
        <p4>Copyright Brand Exponents 2014. All Rights Reserved</p4>
    </div>
</footer>
</body>
</html>